.dialog {
  width: 80vw;

  background-color: #fff;
  border-radius: 8px;

  padding: 16px;

  display: grid;
  grid-template:
    'header header' min-content
    '. .' 16px
    'textarea textarea' min-content
    '. .' 24px
    'cancel-btn confirm-btn' min-content
    / 1fr 1fr;
  place-items: center;

  &__header {
    grid-area: header;
    font-size: 16px;
    color: #333;
  }

  &__textarea {
    grid-area: textarea;

    box-sizing: border-box;
    width: 100%;
    height: 90px;
    border-radius: 4px;

    padding: 8px 16px;

    font-size: 14px;
    background-color: #f9f7f7;
    position: relative;

    // 字数统计
    &::after {
      content: attr(data-count) '/' attr(maxlength);
      position: absolute;
      right: 16px;
      bottom: 16px;

      font-size: 12px;
      color: #999;
    }
  }

  &__cancel-btn {
    grid-area: cancel-btn;

    font-size: 14px;
    line-height: 14px;
    color: #ff457a;
  }

  &__confirm-btn {
    grid-area: confirm-btn;

    width: 32vw;
    height: 8.5333vw;

    border-radius: 58px;
    background-color: #ff457a;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    color: #fff;
  }
}
